<template >
  <div class="index-alert" v-if="showing" @click="hide">
    <div class="wrap">
      <p class="one">7 DAY LIMIT</p>
      <p class="two">We Need You !</p>
      <p class="three">The more you contribute to the mining pool，the more reward for you</p>
      <p class="four">-</p>
      <div class="five">Staking</div>
      <div class="six">Earnings</div>
      <div class="seven">Short-term lock on USDT for higher rewards.</div>
      <div class="eight">Staking rewards can be received immediately.</div>
      <div class="nine">USERS WHOSE WALLET BALANCE REACHES USDT CAN GET ETH</div>
      <div class="line"></div>
      <div class="ten">Amount</div>
      <div class="a">Output</div>
      <div class="line2"></div>
      <div class="b">111 USDT</div>
      <div class="c">1,111 ETH</div>
      <div class="d"></div>
      <div class="accept">
        <p>ACCEPT</p>
        <img src="/accept.png" alt="图标加载失败">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showing: true
    }
  },
  methods: {
    hide (e) {
      if (e.target === e.currentTarget) {
        this.$emit("hideAlert")
      }
    }
  }
}
</script>

<style lang="scss" >
.index-alert {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: $level1;
  color: #042770;

  .wrap {
    position: relative;
    width: 300px;
    height: 450px;
    left: 38px;
    top: 51px;
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    background-image: url("/act1.png");

    .one {
      position: absolute;
      width: 100px;
      left: 7px;
      top: 15px;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      letter-spacing: -.05em;
      color: #042770;
    }

    .two {
      position: absolute;
      align-items: center;
      height: 84px;
      width: 200px;
      top: 40px;
      font-size: 42px;
      line-height: 42px;
      font-weight: 1000;
      letter-spacing: -.03em;
      text-align: center;
      background-image: linear-gradient(103.14deg, #fff5e0 1.71%, #ffd06e 16.05%, #fff5e0 52.9%, #ffd274 90.27%, #fff5e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .three {
      position: absolute;
      width: 276px;
      top: 125px;
      align-items: center;
      line-height: 20px;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      background-image: linear-gradient(103.14deg, #fff5e0 1.71%, #ffd06e 16.05%, #fff5e0 52.9%, #ffd274 90.27%, #fff5e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .four {
      position: absolute;
      width: 200px;
      top: 179px;
      justify-content: center;
      font-weight: 700;
      display: flex;
      align-items: center;
      font-size: 10px;
      letter-spacing: -.02em;
      z-index: 1000;
      color: #fff;
    }

    .five {
      position: absolute;
      width: 90px;
      height: 30px;
      left: 25px;
      top: 210px;
      font-weight: 700;
      font-size: 14px;
      line-height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #042770;
    }

    .six {
      position: absolute;
      width: 90px;
      height: 30px;
      left: 25px;
      top: 250px;
      font-weight: 700;
      font-size: 14px;
      line-height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #042770;
    }

    .seven {
      position: absolute;
      width: 155px;
      height: 40px;
      left: 120px;
      top: 207px;
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      background-image: linear-gradient(103.14deg, #fff5e0 1.71%, #ffd06e 16.05%, #fff5e0 52.9%, #ffd274 90.27%, #fff5e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .eight {
      position: absolute;
      width: 155px;
      height: 40px;
      left: 120px;
      top: 247px;
      font-weight: 700;
      font-size: 12px;
      line-height: 15px;
      background-image: linear-gradient(103.14deg, #fff5e0 1.71%, #ffd06e 16.05%, #fff5e0 52.9%, #ffd274 90.27%, #fff5e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .nine {
      position: absolute;
      width: 200px;
      height: 26px;
      top: 298px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 13px;
      line-height: 15px;
      text-align: center;
      letter-spacing: -.03em;
    }

    .line {
      position: absolute;
      width: 171px;
      height: 0.5px;
      left: 66px;
      top: 340px;
      background: #342174;
    }

    .ten {
      position: absolute;
      width: 36px;
      height: 10px;
      left: 91px;
      top: 350px;
      font-weight: 700;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
    }

    .a {
      position: absolute;
      width: 36px;
      height: 10px;
      left: 175px;
      top: 350px;
      font-weight: 700;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
    }

    .line2 {
      position: absolute;
      width: 171px;
      height: 0.5px;
      left: 66px;
      top: 370px;
      background: #342174;
    }

    .b {
      position: absolute;
      width: 85px;
      height: 40px;
      left: 71px;
      top: 380px;
      font-weight: 700;
      font-size: 11px;
      line-height: 13px;
      text-align: center;
    }

    .c {
      position: absolute;
      width: 85px;
      height: 40px;
      left: 152px;
      top: 380px;
      font-weight: 700;
      font-size: 11px;
      line-height: 13px;
      text-align: center;
    }

    .accept {
      @include center;
      position: absolute;
      top: 420px;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      color: #fff;

      img {
        width: 16px;
        height: 16px;
        margin-left: 10px;
      }
    }
  }
}
</style>
